
$(function(){

    $("#list_left>li").mouseenter(function(){
        $(this).css({"background":"deepskyblue","color":"white"}).siblings("li").css({"background":"white","color":"black"});
    });
    $("#list_left>li").eq(0).mouseenter(function(){
        $("#banner_list_dog").css("display","block").siblings("ul").css("display","none");
    });
    $("#list_left>li").eq(1).mouseenter(function(){
        $("#banner_list_sort").css("display","block").siblings("ul").css("display","none");
    });
    $.ajax({
        url: "../json/List.json",
        type: "post",
        async: true,
        success: function (result) {
            $("#banner_list_sort>li").each(function () {
                $(this).mouseenter(function () {
                    $(this).css("border-top","1px solid green").css("border-left","1px solid green").css("border-bottom","1px solid green").siblings().css("border","none").css("border-bottom","1px dotted #9d9d9d");
                    $(this).prev().css("border-bottom","none");
                    $(this).append($("<div id = 'sort_link'></div>"));
                    var Hgt = 0;
                    $("#sort_link").append($("<dl class = 'part'></dl>"));
                    for(var key in result){
                        $(".part").append("<dt class = 'summary' style='height: 30px;'>" + key + "</dt>");
                        $(".part").append("<dd class = 'content' style='height: 30px;'>" + result[key] + "</dd>");
                        Hgt++;
                    }
                    //$("#part").css("height",Hgt*30);
                });
                $(this).mouseleave(function () {
                    $(this).css("border","none").css("border-bottom","1px dotted #9d9d9d").prev().css("border-bottom","1px dotted #9d9d9d");
                    $("#sort_link").remove();
                });
            });
        }
    })
});
